// react入口 =》vue入口main.js
import ReactDOM from 'react-dom'

/**
 * jsx条件渲染：
 * 可以使用`if/else`或`三元运算符`或`逻辑与(&&)运算符`
 */
/**
 *
 * @param {*} isLoading 是否是加载中 true:显示加载中  false:加载完成
 * @returns
 */
const showLoading = isLoading => {
  if (isLoading) {
    return <span>加载中...</span>
  }
  return <span>加载完成</span>
}

const isLoad = false

// template
const box = (
  <div className="box">
    <p>{showLoading(true)}</p>
    <p>{isLoad ? <span>loading。。。</span> : <span>loaded</span>}</p>
    <p>{isLoad && <span>loading。。。</span>}</p>
  </div>
)

ReactDOM.render(box, document.getElementById('root'))
